<template>
	<view>
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view class="u-search-box  cssBox">
			<view class="u-search-inner">
				<u-search v-model="searchKeyword" @change="search" shape="round" :clearabled="true" :show-action="false"
					input-align="left">
				</u-search>
			</view>
		</view>
		<uni-list>
			<uni-list-item v-for="(item,index) in equipmentList" :key="item.equipmentRealId">
				<template v-slot:header>
					<view class="uni-thumb equipment-picture">
						<u-album :urls="item.picUrl" multipleMode="aspectFill" multipleSize="120" maxCount="1"
							:showMore="false"></u-album>
					</view>
				</template>
				<view slot="body" class="equipment-Item" @click="pointlist(item.equipmentRealId)">
					<view>
						<view class="uni-title">
							<text class="uni-equipmentName">{{item.name}}</text>
						</view>
						<view>
							<text
								:class="['uni-tag',item.healthStatusName=='预警' ? 'unusual-tag' : item.healthStatusName=='报警'? 'warning-tag' : 'normal-tag']">{{item.healthStatusName}}</text>
						</view>
					</view>
					<view class="recordInfo">
						<view class="uni-note">
							<text class="uni-description">{{item.description}}</text>
						</view>
						<view class="uni-note uni-collectedTime">
							最后检测于:{{item.collectedTime==null?'暂无':item.collectedTime}}</view>

					</view>
				</view>
			</uni-list-item>
		</uni-list>
		<u-loadmore :status="loadStatus" :loading-text="loadingText" :loadmore-text="loadmoreText"
			:nomore-text="nomoreText" bgColor="#f2f2f2"></u-loadmore>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				mysNavConfig: {
					/* 占位开启  */
					navPadding: true,
					/* 背景 */
					bgColor: "#0055ff",
					/* 开启单页显示首页图标 */
					isHome: true,
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "设备列表",
						color: "#ffffff",
						fontSize: "20px", // px upx rpx
						fontWeight: "500", // 100 - 700
					}
				},
				userInfo: '',
				equipmentList: [],
				searchKeyword: '',
				pageSize: 8,
				count: 8,
				loadStatus: 'loadmore',
				pageIndex: 1,
				loadingText: '加载中...',
				loadmoreText: '上拉加载更多',
				nomoreText: '无数据'
			};
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo');
		},
		onShow() {
			this.getEquipmentList();
		},
		methods: {
			onReachBottom() {
				this.loadStatus = "loadmore";
				if (this.count < this.pageSize) {
					this.loadStatus = "nomore";
				} else {
					setTimeout(() => {
						this.loadStatus = "loading";
						this.pageSize += 6;
						this.getEquipmentList();
					}, 1000);
				}
			},
			getEquipmentList() {
				uni.showLoading({
					title: "读取中...",
					mask: true,
				});
				uni.request({
					url: getApp().globalData.serverAddress + this.$uri.Uri_getEquipmentList.replace("{userRealId}",
						this.userInfo.userRealId),
					data: {
						page: this.pageIndex,
						limit: this.pageSize,
						name: this.searchKeyword
					},
					dataType: "json",
					method: "GET",
					success: (res) => {
						for (let items of res.data.data) {
							var arr = []
							for (let val of items.picUrl) {
								arr.push(getApp().globalData.serverAddress + val)
							}
							items.picUrl = arr
						}
						this.count = res.data.count
						this.equipmentList = res.data.data
						if (this.count < this.pageSize) {
							this.loadStatus = "nomore";
						}
					},
					fail(res) {
						console.log(res);
					},
					complete: () => {
						setTimeout(function() {
							uni.hideLoading();
						}, 200);
					}
				})
			},
			search(value) {
				this.getEquipmentList()
			},
			pointlist(value) {
				uni.redirectTo({
					url: '/pages/records/pointList?equipmentRealId=' + value
				});
			}
		},
		onPullDownRefresh() {
			this.pageSize = 8;
			this.getEquipmentList();
			uni.stopPullDownRefresh();
		}
	};
</script>

<style lang="scss">
	@import '@/common/uni-ui.scss';

	.u-album__row__wrapper image {
		width: 120px !important;
		height: 120px !important;
	}

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	.cssBox {
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		margin-bottom: 15rpx;
	}

	.equipment-Item {
		width: 1px;
		flex: 1;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 10px;
	}

	.equipment-picture {
		width: 120px;
		height: 120px;
	}


	.recordInfo {
		margin-top: 15px;
		font-size: 12px;
		color: #ff5a5f;
	}

	.normal-tag {
		background: #11ff19;
		border: none;
		color: #fff;
		font-size: 14px;
		padding: 5px;
	}

	.unusual-tag {
		background: #ffc30c;
		border: none;
		color: #fff;
		font-size: 14px;
		padding: 5px;
	}

	.warning-tag {
		background: #ff051e;
		border: none;
		color: #fff;
		font-size: 14px;
		padding: 5px;
	}

	.uni-equipmentName {
		overflow: hidden;
		font-size: 22px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.uni-description {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		font-size: 14px;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.uni-collectedTime {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		font-size: 15px;
		color: #0a4bff;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>
